<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Django模板</title>
</head>

<body>
    <h2>Django模板</h2>
    <hr>

    {# 单行注释 #}

    {% comment %}
    多行注释
    多行注释
    {% endcomment %}
    <p>name:{{name}}</p>
    <p>age:{{age}}</p>
    <p>like: {{likes.1}}</p>
    <hr>
    {# 标签 #}
    <h3>if语句</h3>
    <h4>单分支</h4>
    {% if age < 18 %}
    <p> {{name}} 未成年 </p>
    {% endif %}

    <h4>多分支</h4>
    {% if age < 18 %}
    <p> {{name}} 未成年 </p>
    {% elif age < 60 %}
    <p> {{name}} 壮年 </p>

    {% else %}
    <p> {{name}} 老年人</p>
    {% endif %}

    <hr>
    <h3>for循环</h3>
    <h4>常规for循环</h4>
    {% for like in likes  %}
    <li>{{like}}</li>
    {% endfor %}

    <h4>for empty循环 </h4>
    {% for like in likes2  %}
    <li>{{like}}</li>
    {% empty %}
    <p>likes2 不存在</p>
    {% endfor %}

    <h4>下标</h4>
    <ul>
        {% for like in likes  %}
        <li>counter0 : {{forloop.counter0}} , counter : {{forloop.counter}} , revcounter0 :
            {{forloop.revcounter0}},revcounter : {{forloop.revcounter}}
        </li>
        {% if forloop.first %}
        <b> - First </b>
        {% endif %}

        {% if forloop.last %}
        <b> - Last </b>
        {% endif %}


        {% endfor %}
    </ul>

    <h4>嵌套循环</h4>
    <table border="1" width="500px">
        {% for star in stars %}
        <tr>
            {% for s in  star %}
            <td>
                {{s}}
                - {{forloop.parentloop.counter}}
                - {{forloop.counter}}
            </td>
            {% endfor %}

        </tr>
        {% endfor %}
    </table>
    <hr>
    <h3>过滤器</h3>
    <p>age|add:2 = {{age|add:2}}</p>
    <p>age|add:-2 = {{age | add:-2 }}</p>
    <p>name|first|upper {{ name | first | upper}}</p>
    <p>name|title {{name|title}}</p>
    <p>name|truncatechars {{name|truncatechars:4}}</p>
    <p>{{likes}}</p>
    <p>likes|join {{likes|join:','}}</p>
    <p>{{likes2}}</p>
    <p>likes2|default:'swiming' = {{likes2|default:'swiming'}}</p>
    <p>{{dt}}</p>
    <p>{{dt|date:'Y-m-d'}}</p>
    <p>{{code}}</p>
    <p>{{code|safe}}</p>
    <p>{{code2}}</p>
    <p>{{code2|safe}}</p>
    <hr>
    <p>
        {% autoescape off %}
        {{code}}
        {% endautoescape %}

        {% autoescape on %}
        {{code}}
        {% endautoescape %}
    </p>

</body>

</html>